<template>
  <div className="pics">
    <!-- 单张图片 -->
    <div className="top">
      <img
          :src="images[0].src"
          :alt="images[0].alt"
          class="single-image"
      />
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";

const images = ref([
  {src: require('@/assets/imgs/upbg1.jpeg'), alt: 'Image 2'},
  // 其他图片对象可以在这里添加
]);
</script>

<style scoped>
.pics {
  width: 100%; /* 根据父容器宽度自适应 */
  margin: 0 auto; /* 水平居中 */
}

.top {
  text-align: center; /* 确保图片在容器内水平居中 */
  overflow: hidden; /* 隐藏溢出的内容 */
}

.single-image {
  width: 2000px; /* 根据图片原始比例自动调整宽度 */
  height: 500px; /* 设置图片高度 */
  max-width: 100%; /* 图片最大宽度不超过容器宽度 */
  display: inline-block; /* 使图片可以水平居中 */
  object-fit: cover; /* 确保图片覆盖整个容器，不变形 */
}
</style>